<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        window.onload = function () {
            let obox = document.getElementById("box");
            let cboList = obox.getElementsByTagName("input");
            let oText = document.getElementById("tt");
            document.getElementById("box").onclick = function (e) {
                let src = e ? e.target : event.srcElement;
                if (src.tagName === "INPUT") {
                    let values = [];
                    for (let i = 0; i < cboList.length; i++) {
                        if (cboList[i].checked) {
                            values.push(cboList[i].value);
                        }
                    }
                    oText.value = values.join(",");
                }
            }
        }
    </script>
</head>

<body>
<p><input type="text" id="tt"/></p>
<div id="box">
    <label><input type="checkbox" value="a" checked="checked"/>a</label>
    <label><input type="checkbox" value="b" checked="checked"/>b</label>
    <label><input type="checkbox" value="c"/>c</label>
    <label><input type="checkbox" value="d"/>d</label>
    <label><input type="checkbox" value="e"/>e</label>
    <label><input type="checkbox" value="f"/>f</label>
</div>
</body>
</html>